<template>
	<view class="container">
		<view class="content">
			<!-- 动态渲染服务通知 -->
			<view class="message-item" v-for="(item, index) in serviceMessages" :key="index">
				<view class="message-header">
					<text class="message-title">{{ item.messageTitle }}</text>
					<text class="message-date">{{ item.createTime }}</text>
				</view>
				<view class="message-body">
					<text>{{ item.messageContent }}</text>
				</view>
			</view>
			<!-- 无数据提示 --><!-- 无数据提示 -->
			<!-- 无数据提示 -->
			<view v-if="serviceMessages.length === 0" class="no-data">
				<text>暂无消息</text>
			</view>
		</view>
	</view>

</template>



<script>

	import {
		xiaoXiApi
	} from '@/packagenew/api/xiaoXiTongZhi.js'

	export default {
		data() {
			return {
				serviceMessages: [] // 初始化为空数组
			};
		},
		methods: {
			// 动态获取服务通知数据
			async fetchServiceMessages() {
				try {
					const res = await xiaoXiApi.getXiaoXiByUserId(-10);
					this.serviceMessages = res.data;
					console.log(res.data)
					console.log(this.serviceMessages.length)
					console.log(this.serviceMessages)
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				}
			}
		},
		mounted() {
			// 页面加载时自动获取数据
			this.fetchServiceMessages();
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.content {
		flex: 1;
		padding: 16px;
		background-color: #ffffff;
	}

	.message-item {
		margin-bottom: 16px;
		padding: 16px;
		background-color: #f9f9f9;
		border-radius: 8px;
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.message-title {
		font-size: 16px;
		font-weight: bold;
	}

	.message-date {
		font-size: 12px;
		color: #999999;
	}

	.message-body {
		font-size: 14px;
		color: #333333;
	}

	.no-data {
		text-align: center;
		padding: 20px;
		color: #999999;
		font-size: 14px;
	}
</style>